當elements都是float，element的高會影響其位置，如書中範例 (圖一)
(圖一)
<body> 750px, <p>230px + 左右margin 5px的情況下，可以擺3個column，然後畫面中，第四個paragraph因為第三個高度太短，直接跑版接續在第三個column之下，如圖二
(圖二)
如果要解決這個問題，就得讓高度和同列最高的一樣，例如讓第三個paragraph的內容和第二個一樣，則第四個就不會跑版了，如圖三
(圖三)
然而這樣的做法不夠彈性，因為我們很難保證每一區的內容量，因此使用clear來解決，這個方法是不讓其他人element去搶設定element的left或right屬性
原文
The clear property allows you
to say that no element (within
the same containing element)
should touch the left or righthand sides of a box. It can take
the following values
HTML
<p class="clear">In 1865, the velocipede ... </p>
CSS
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;}
.clear {
clear: left;}
iThome鐵人賽
看影片追技術